<template>
  <editor-layout class="edit" @ok="handleOk" v-on="$listeners" v-loading="loading" :loading="saveLoading">
    <el-form size="small" :model="model" :rules="rule" ref="form" @keyup.enter.native="handleOk()" label-width="110px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="名称" prop="reportName">
            <el-input v-model="model.reportName" placeholder="名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="enableFlag">
            <report-select v-model="model.enableFlag" type="PUBLISH_FLAG" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开启访问限制" prop="viewFlag">
            <el-switch v-model="model.viewFlag" :active-value="1" :inactive-value="0" @change="onViewFlagChange"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="model.viewFlag">
          <el-form-item label="访问码" prop="reportCode">
            <el-input v-model="model.reportCode" placeholder="访问码">
              <template v-slot:suffix>
                <el-button type="text" size="small" @click="generCode">生成</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="所属分组" prop="groupId">
            <el-select v-model="model.groupId">
              <el-option v-for="item in groupList" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="描述" prop="reportDesc">
            <el-input type="textarea" v-model="model.reportDesc"  />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="缩略图" prop="file">
            <file-upload ref="up1" :params="{xtlx: 'user-report'}" :limit="1" accept="image/*" listType="picture"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </editor-layout>
</template>

<script>
import {postReportSave, getReportInfoId} from '@/api/report'
import fileUpload from '@/components/common/file/file-upload'
import {postImagegroupListUserAll} from "@/api/image-group";

export default {
  name: 'edit',
  components: {
    fileUpload
  },
  props: {
    id: [String, Number]
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      model: {
        reportName: '',
        enableFlag: 0,
        viewFlag: 0,
        reportCode: '',
        reportDesc: '',
        groupId: ''
      },
      rule: {
        groupId: [{required: true, message: '必填项'}],
        reportName: [{required: true, message: '必填项'}]
      },
      groupList: []
    }
  },
  methods: {
    async init() {
      await this.loadGroups()
      if (this.id) {
        this.loadForm()
      }
    },
    async loadGroups() {
      const res = await postImagegroupListUserAll({type: 'dashboard'})
      this.groupList = res.map(o => {
        return {label: o.name, value: o.id}
      })
    },
    async loadForm() {
      this.loading = true
      const data = await getReportInfoId(this.id).catch(e => {
        this.loading = false
        throw new Error(e)
      })
      this.model = data
      if(data.reportImage) {
        this.$refs.up1.fileList = [{url: data.reportImage}]
      }
      this.loading = false
    },
    onViewFlagChange(val) {
      if(val && !this.model.reportCode) {
        this.generCode()
      }
    },
    generCode() {
      const codes = []
      for(let i =0; i<4; i++) {
        const val = Math.round(Math.random(0, 1) * 9)
        codes.push(val)
      }
      this.model.reportCode = codes.join('')
    },
    handleOk() {
      this.$refs.form.validate(ok => {
        if(!ok) return

        if(this.model.viewFlag) {
          if(!this.model.reportCode) {
            this.$message.warning('请输入访问码！')
            return
          }
        }

        const images = this.$refs.up1.getData()
        if(images.length > 0) {
          this.model.reportImage = images[0].url
        }

        postReportSave(this.model).then(res => {
          this.saveLoading = false
          this.$notify.success('保存成功！')
          this.$emit('on-ok')
        })
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>
